@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?3vmdlt');
  src:  url('fonts/icomoon.eot?3vmdlt#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?3vmdlt') format('truetype'),
    url('fonts/icomoon.woff?3vmdlt') format('woff'),
    url('fonts/icomoon.svg?3vmdlt#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
li {
	list-style: none;
}
ul {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
a{
	text-decoration: none;
}
body {
	background-color: #F5F5F5;
	/*position: relative;*/
}
p {
	margin:0;
}
i {
	font-style: normal;
}
body {
	height: 1497px;
}
/*头部导航栏部分 start*/
nav {
	position: fixed;
	z-index: 99;
}
.top {
	width: 100%;
	height: 75px;
	border-bottom: 5px solid #C20C0C;
	box-sizing: border-box;
	background-color: #242424;
	padding: 0 123px 0 123px;
	/*position: fixed;*/

}
/*logo部分*/
.cloudmusic-logo {
	width: 177px;
	height: 69px;
	background: url(../img/topbar.png);
	background-position: 0 0;
	margin-right: 0px;
	cursor: pointer;
}
/*小导航*/
.nav li {
	padding: 28px 20px 26px 20px;
	box-sizing: border-box;
	float: left;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	position: relative;
}
.nav li i {
	font-family: 'icomoon';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform:translateX(-50%);
	font-size: 12px;
	color: #C20C0C;
	display: none;
}
/*搜索框*/
.music-search {
	width: 160px;
	height: 70px;
	padding-top: 20px;
	margin-left: 60px;
	box-sizing: border-box;
	position: relative;
}
.music-search input {
	width: 160px;
	height: 32px;
	border-radius: 20px;
	outline: none;
	border: none;
	padding-left: 30px;
	font-size: 12px;
}
.music-search span {
	position: absolute;
	font-family: 'icomoon';
	top: 27px;
	left: 10px;
	color: #3C3C3C;
}
/*92 34*/
/*创作者中心*/
.creator-center {
	box-sizing: border-box;
	width: 92px;
	height: 34px;
	border: 1px solid #4F4F4F;
	margin: 19px 14px;
	border-radius: 20px;
	color:#ccc;
	text-align: center;
	line-height:34px;
	font-size: 12px;
	cursor: pointer;
}
.user-center {
	width: 58px;
	height: 34px;
	margin-top: 19px;
	margin-left: 8px;
	/*background-color:pink;*/
	position: relative;
}
.user-center a {
	cursor: default;
}
.user-center img {
	border-radius: 50%;
}
.user-center span {
	font-family: "icomoon";
	font-size: 18px;
	position: absolute;
	left: 36px;
	top: 6px;
	color: #454545;
	cursor: default;
}
/*头部导航栏部分 end*/
/*主体部分 start*/
.main {
	width: 982px;
	margin: 0 auto;	
}
/*歌单列表部分*/
.song-list {
	height: 547px;
	width: 242px;
	border-left: 1px solid #D3D3D3;
	border-right: 1px solid #D3D3D3;
	padding-top: 40px;
	background-color: #F9F9F9;
	position: fixed;
	left: 184px;
	top: 75px;
	overflow: scroll;
}
.song-list>div {
	padding: 0 10px 0 20px;
	font-size: 15px;
	line-height: 36px;
	font-weight: 600;
	cursor: pointer;
}
.song-list>div:nth-child(1),.song-list>div:nth-child(2) {
	padding-left: 40px;
}
.song-list>div span {
	font-family: 'icomoon';
	font-size: 20px;
	vertical-align: top;
}
.create-list .triangle-right {
	display: none;
}
.collect-list .triangle-down {
	display: none;
}
.create-list .number {
	font-size: 15px;
	font-weight: 600;
}
.create-list a:hover {
	background-color: #fff;
}
.song-list>div a {
	display: block;
	width: 52px;
	height: 22px;
	border: 1px solid #C4C4C4;
	margin-top: 6px;
	text-align: center;
	line-height: 22px;
	font-size: 12px;
	color: #515151;
	border-radius: 5px;
	font-weight: normal;
}
.song-list>div a i {
	font-family: 'icomoon';
	font-size: 3px;
	font-style: normal;
	font-weight: normal;
	color: red;
	padding-right: 4px;
}
.create-list-content li {
	height: 54px;
	width: 100%;
	background-color: #F9F9F9;
	padding-left: 20px;
	padding-top: 8px;
	box-sizing: border-box;
	cursor: pointer;
}
.create-list-content li:first-child {
	background-color: #eee;
}
.album-cover {
	width: 40px;
	height: 40px;
	background-color: #ccc;
}
.album-message {
	padding-top: 5px;
	padding-left: 8px;
}
.album-message p {
	font-size: 10px;
}
.album-song-number {
	margin-top: 10px;
}
/*歌单操作选项部分*/
/*741 313*/
.album-control {
	width: 738px;
	height: 313px;
	background-color: #fff;
	border-right: 1px solid #D3D3D3;
	box-sizing: border-box;
	border-bottom: 2px solid #C20C0C;
	padding-left: 36px;
	padding-right: 10px;
	padding-top:36px;
	position: absolute;
	left: 428px;
	top: 75px;
}
.album-control-cover {
	width: 208px;
	height: 208px;
	border: 1px solid #D5D5D5;
	box-sizing: border-box;
	padding: 3px;
}
.album-control-cover img {
	width: 100%;
	height: 100%;
}
.album-control-name {
	margin-left: 26px;
	margin-top: 3px;
}
.album-control-name i {
	width: 55px;
	height: 26px;
	display: block;
	background: url(../img/icon.png);
	background-position: 0 -242px;
	margin-right: 4px;
}
.album-control-name span {
	font-size: 20px;
}
.album-control-message {
	position: absolute;
	top: 72px;
	left: 270px;
	line-height: 36px;
}
.user-image {
	width: 36px;
	height: 36px;
	cursor: pointer;
}
.user-image img {
	width: 100%;
	height: 100%;
}
.user-id {
	height: 36px;
}
.user-id a {
	font-size: 12px;
	margin-left: 10px;
	color: #0C73C2;
	vertical-align: top;
}
.create-time {
	margin-left: 20px;
	font-size: 12px;
	line-height: 36px;
	vertical-align: baseline;
}
/*739 40*/
.album-control-songlist {
	width: 692px;
	height: 40px;
	position: absolute;
	bottom: 0;
	line-height: 40px;
}
.album-control-songlist h3 {
	margin: 0;
	padding-right: 1px;
	font-weight: normal;
	color: #333;
}
.album-control-songlist span {
	font-size: 12px;
	color: #666;
}
.album-control-songlist span i {
	color: #C20C0C;
	font-weight: 500;
}
.album-control-songlist span:nth-of-type(1) {
	margin-left: 20px;
}
.uploadMusic {
	position: absolute;
	top: 116px;
	left: 269px;
}
/*歌曲列表部分*/
.music-list {
	position: absolute;
	left: 428px;
	top: 388px;
}
.music-list-title ul {
	box-shadow: 0 1px 0px 0px rgba(0, 0, 0, .1) ;
}
.music-list-title li {
	float: left;
	height: 34px;
	box-sizing: border-box;
	padding-top: 9px;
	padding-left: 5px;
	font-size: 12px;
	color: #666;
}
.music-list-title li:first-child {
	width: 75px;
	border-top: 1px solid #D9D9D9;
	border-bottom: 1px solid #D9D9D9;
	border-right: 1px solid #D9D9D9;
	background: -webkit-linear-gradient(top,#FFF,#F0F0F0);
}
.music-list-title li:nth-child(2) {
	width: 302px;
	border-top: 1px solid #D9D9D9;
	border-bottom: 1px solid #D9D9D9;
	border-right: 1px solid #D9D9D9;
	background: -webkit-linear-gradient(top,#FFF,#F0F0F0);
}
.music-list-title li:nth-child(3) {
	width: 110px;
	border-top: 1px solid #D9D9D9;
	border-bottom: 1px solid #D9D9D9;
	border-right: 1px solid #D9D9D9;
	background: -webkit-linear-gradient(top,#FFF,#F0F0F0);
}
.music-list-title li:nth-child(4) {
	width: 102px;
	border-top: 1px solid #D9D9D9;
	border-bottom: 1px solid #D9D9D9;
	border-right: 1px solid #D9D9D9;
	background: -webkit-linear-gradient(top,#FFF,#F0F0F0);
}
.music-list-title li:nth-child(5) {
	width: 149px;
	border-top: 1px solid #D9D9D9;
	border-bottom: 1px solid #D9D9D9;
	border-right: 2px solid #D9D9D9;
	background: -webkit-linear-gradient(top,#FFF,#F0F0F0);
}
/*fff-f0f0f0*/
.music-list-option {
	width: 738px;
}
.music-list-option li {
	height: 30px;
	width: 100%;
	background-color: #FFF;
	box-sizing: border-box;
	padding: 0px 13px;
	line-height: 30px;
	font-size: 10px;
}
.song-number {
	font-size: 10px;
	color: #999;
}
.little-player-button {
	font-family: 'icomoon';
	font-size: 16px;
	vertical-align: middle;
	margin-left: 24px;
	color: #A8A8A8;
	cursor: pointer;
}
.little-player-button:hover {
	color: #606060;
}
.currentPlay {
	color: #C20C0C!important;
}
.music-name {
	display: block;
	width: 298px;
	margin-left: 20px;
	float: left;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.music-name:hover {
	text-decoration: underline;
}
.music-duration {
	display: block;
	width: 111px;
	float: left;
	cursor: pointer;
}
.singer-name {
	display: block;
	width: 103px;
	margin-left: 0px;
	float: left;
	cursor: pointer;
}
.singer-name:hover {
	text-decoration: underline;
}
.album-name {
	cursor: pointer;
}
.album-name:hover {
	text-decoration: underline;
}
.delete-key {
	color: #000;
}
.delete-key:hover {
	color: #C20C0C;
}
/*<!-- 新建歌单模态框 -->*/
.create-newlist {
	width: 480px;
	height: 250px;
	background-color:#fff;
	position: absolute;
	z-index: 1000;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 5px;
	box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .4),-3px 0px 3px 3px rgba(0, 0, 0, .4);
	display: none;
}
.create-newlist-title {
	width: 100%;
	height: 40px;
	background-color: #2D2D2D;
	padding: 10px 20px;
	box-sizing: border-box;
	font-size: 14px;
	color: #fff;
	border-radius: 5px 5px 0 0;
}
.create-newlist-name {
	font-size: 12px;
	margin-top: 40px;
	margin-left: 30px;
}
.create-newlist-name input {
	width: 344px;
	height: 30px;
	outline: none;
	border-radius: 2px;
	border:none;
	border:1px solid #ccc;
	padding-left: 5px;
}
.create-newlist-surebutton {
	width: 80px;
	height: 32px;
	background-color: #3282CE;
	text-align: center;
	line-height: 32px;
	border-radius: 5px;
	margin-top: 60px;
	margin-left: 82px;
	float: left;
	font-size: 14px;
	cursor: pointer;
	border:1px solid #ccc;
}
.create-newlist-cancelbutton {
	width: 80px;
	height: 32px;
	background-color: #F7F7F7;
	text-align: center;
	line-height: 32px;
	border-radius: 5px;
	margin-top: 60px;
	margin-left: 22px;
	float: left;
	font-size: 14px;
	cursor: pointer;
	border:1px solid #ccc;
}
/*音乐控制器部分*/
.music-control {
	position: fixed;
	bottom: -40px;
	left: 0;
	height: 47px;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #000;
	background:-webkit-linear-gradient(top,#363636,#242323);
}
.controlKey {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: url(../img/playbar.png);
}
.pre-choose,.next-choose {
	width: 26px;
	height: 26px;
}
.pre-choose {
	background-position: -1px -130px;
	left: 187px;
}
.next-choose {
	background-position: -82px -130px;
	left: 267px;
}
.player-control {
	width: 34px;
	height: 34px;
	left: 223px;
}
.play-click {
	background-position: -2px -205px;
}
.pause-click {
	background-position: -2px -166px;
}
.album-cover-min {
	width: 34px;
	height: 34px;
	background-color: #666;
	border: 1px solid #000;
	box-sizing: border-box;
	border-radius: 4px;
	position: absolute;
	top: 50%;
	transform:translateY(-50%);
	left: 322px;
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1),-1px -1px 1px 1px rgba(0, 0, 0, .1);
}
.currentPlayMusicTitle {
	position: absolute;
	top: 6px;
	left: 369px;
	color: #fff;
	font-size: 10px;
}
.progressBar {
	height: 9px;
	width: 493px;
	background-color: #191919;
	position: absolute;
	border-radius: 5px;
	top: 25px;
	left: 369px;
	box-shadow: 0 1px 0px 0px #484747;
	border-top: 1px solid #0B0B0B;
	box-sizing: border-box;
}
.playTimeInfo {
	position: absolute;
	top: 23px;
	left: 878px;
	font-size: 10px;
	color: #fff;
}
.play-btn {
	position: absolute;
	top: -8px;
	left: 0px;
	margin-left: -8px;
}